<template>
  <div class="inOutBound">
    <el-dialog
      :visible.sync="dialogVisible"
      width="70%"
      center
      :before-close="() => $emit('dialogQuxiao')"
    >
      <span style="font-size: 20px; margin-bottom: 20px; display: inline-block"
        >{{ type }}工单</span
      >
      <div v-if="type === '出库'">
        <el-table
          :header-cell-style="getRowClass"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column align="center" type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column
            v-for="(item, index) in type === '入库'
              ? tableDataListru
              : type === '出库'
              ? tableDataListchu
              : ''"
            :index="index"
            :key="item.id"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>

      <div v-else>
        <el-table
          :header-cell-style="getRowClass"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column align="center" type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column
            v-for="(item, index) in type === '入库'
              ? tableDataListru
              : type === '出库'
              ? tableDataListchu
              : ''"
            :index="index"
            :key="item.id"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="pagin" v-if="total > pageSize">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>

<script>
import { NewLIUZHUANget } from "@/api/stock/banlance3.js";
export default {
  data() {
    return {
      //分页
      total: 0,
      currPage: 1,
      pageSize: 10,
      //表格
      tableData: [],
      form: "",
      tableDataListru: [
        {
          id: 1,
          prop: "affiliationOut",
          label: "归属",
          width: "width",
        },
        { id: 17, prop: "goWhereCraft", label: "工艺", width: "80" },
        { id: 3, prop: "diameterIn", label: "直径", width: "80" },
        { id: 19, prop: "lengthIn", label: "长度", width: "80" },
        { id: 23, prop: "moldOut", label: "类型", width: "80" },
        { id: 6, prop: "number", label: "数量", width: "80" },
        { id: 8, prop: "outside", label: "外协地", width: "80" },
        { id: 21, prop: "goodOut", label: "正次品", width: "80" },
        { id: 16, prop: "whatModelOut", label: "型号", width: "80" },
        { id: 27, prop: "statusOut", label: "状态", width: "80" },
        { id: 14, prop: "Customer", label: "客户", width: "80" },
        { id: 18, prop: "lotNumber", label: "批号", width: "80" },
        { id: 20, prop: "inputPeople", label: "填写人", width: "90" },
        { id: 11, prop: "creatTime", label: "创建时间", width: "100" },
        { id: 12, prop: "remark", label: "备注", width: "90" },
      ],
      tableDataListchu: [
        { id: 15, prop: "workOrderType", label: "工单类型", width: "100" },

        {
          id: 1,
          prop: "affiliation",
          label: "归属",
          width: "width",
        },

        { id: 2, prop: "originCraft", label: "工艺", width: "80" },
        { id: 22, prop: "diameterOut", label: "直径", width: "80" },
        { id: 4, prop: "lengthOut", label: "长度", width: "80" },
        { id: 5, prop: "mold", label: "类型", width: "80" },
        { id: 6, prop: "number", label: "数量", width: "80" },
        { id: 8, prop: "outside", label: "外协地", width: "80" },
        { id: 9, prop: "good", label: "正次品", width: "80" },
        { id: 10, prop: "whatModel", label: "型号", width: "80" },

        { id: 13, prop: "status", label: "状态", width: "80" },
        { id: 14, prop: "Customer", label: "客户", width: "80" },
        { id: 18, prop: "lotNumber", label: "批号", width: "80" },
        { id: 20, prop: "inputPeople", label: "填写人", width: "80" },
        { id: 11, prop: "creatTime", label: "创建时间", width: "100" },
        { id: 12, prop: "remark", label: "备注", width: "90" },
      ],
    };
  },
  props: ["dialogVisible", "row", "type"],
  emits: ["dialogQuxiao"],
  watch: {
    row(n) {
      if (n != 1) {
        this.form = n;
        this.getData();
      }
    },
  },
  created() {},
  methods: {
    async getData() {
      let params;
      if (this.type === "入库") {
        params = {
          pageSize: this.pageSize,
          currPage: this.currPage,
          goWhereCraft: this.form.craft,
          diameterIn: this.form.diameter,
          lengthIn: this.form.length,
          affiliationOut: this.form.affiliation,
          whatModelOut: this.form.whatModel,
          goodOut: this.form.goodOrBad,
          moldOut: this.form.mold,
          statusOut: this.form.status,
          workOrderType: this.type,
        };
      } else {
        params = {
          pageSize: this.pageSize,
          currPage: this.currPage,
          originCraft: this.form.craft,
          lengthOut: this.form.length,
          affiliation: this.form.affiliation,
          diameterOut: this.form.diameter,
          whatModel: this.form.whatModel,
          good: this.form.goodOrBad,
          mold: this.form.mold,
          status: this.form.status,
          workOrderType: this.type,
        };
      }
      console.log(params, 112);
      const { data } = await NewLIUZHUANget(params);
      console.log(data, 123);
      this.total = data.data.total;
      this.tableData = data.data.pageData;
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.getData();
    },
  },
};
</script>

<style  scoped>
.inOutBound {
   .el-dialog__body {
    padding: 0px 20px;
  }
}
</style>
